<template>
	<view class="container">
		<view class="warp u-m-t-20">

			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<u-gap :bg-color="bgColor" :height="height" :required="required"></u-gap>
				<u-form-item v-if="model.iam == '智汇团队'" class="u-m-l-30 u-m-r-40" :label-width="200" :label-position="labelPosition"
				 label="选择团队" prop="hdjf">
					<u-input type="select" :select-open="selectShowTeam" v-model="form.team" placeholder="请选择" placeholderStyle="color: #0D1D36;"
					 input-align="right" @click="selectShowTeam = true"></u-input>
				</u-form-item>
				<u-form-item v-show="show" class="u-m-l-30 u-m-r-30" :required="required" label-width="200" :label-position="labelPosition"
				 label="匹配对象" prop="ppdx">
					<picker @change="bindPickerChange" :range="ppdxs" range-key="label" style="width:100%;text-align: right;">
						<view class="uni-input">{{form.ppdx || "请选择"}}</view>
					</picker>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :required="required" label-width="200" :label-position="labelPosition"
				 label="类别" prop="lb">
					 <block v-if="selectLB == 1">					 
					 <view style="width:100%;text-align: right;" @click="mSelect">{{form.lb || "请选择"}}</view>					 
					 <TriTree ref="triTree" :range="fetchDict.company_type" @confirm="function (e){return setChooseType(e,'lb')}"></TriTree>
					 </block>
					<block v-else>
					<u-input :border="border" v-model="form.lb" placeholder="请选择"
					 placeholderStyle="color: #0D1D36;" input-align="right" ></u-input>
					</block>	
				</u-form-item>
				
				<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="诚信保证金" prop="integrityDeposit" :border-bottom="false">
					<u-input :border="border" placeholder="请输入保证金金额" v-model="form.integrityDeposit" type="text" input-align="right"></u-input>元
				</u-form-item>
				<u-form-item style="padding-top:0;" class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="" prop="xmbs">
					<view style="width:100%;color: #9da2b0;padding-bottom:5rpx;text-align: right;">违约先行赔付上限为保证金数额</view>
				</u-form-item>
								
				<u-gap  v-if="selectLB != 1" :bg-color="bgColor" :height="height" :required="required" :margin-top="marginTop" :margin-bottom="marginBottom"></u-gap>
				<view class="qtsm u-m-l-40 u-m-r-30 u-m-t-40">
					<image src="../../../static/img/releasesm.png" style="width: 29rpx; height: 29rpx;" mode=""></image>
					<text class="hz">简短说明</text>
				</view>
				<u-form-item class="  zwpj u-m-l-30 u-m-r-30 "  :label-position="labelPosition" prop="jdsm">
					<u-input type="textarea" :border="border" placeholder="请输入简短说明" v-model="form.jdsm" />
				</u-form-item>
			</u-form>
		</view>
		<view class="warp u-m-t-20 u-p-30">

			<u-button class="button" @click="submit">确定</u-button>
			<!--弹出框-->
			<u-select mode="single-column" :list="fetchDict.service_content" v-model="selectShowFwnr" @confirm="selectConfirmFwnr"></u-select>	
			<u-select mode="single-column" :list="selectListTeam" v-model="selectShowTeam" value-name="id" label-name="name"
			 @confirm="confirmTeam"></u-select>		
			<!--弹出框-->
		</view>
	</view>
</template>
<script>
	import TriTree from '@/components/tki-tree/tki-tree.vue'
	export default {
		components: {
			TriTree
		},
		data() {
			let that = this;
			return {
				selectListTeam:[],
				selectShowTeam:false,
				index:0,
				ppdxs:[],
				identitys:[],
				dataSource: [{
					id: 1,
					name: '个人',
					child: []
				}],
				name: '请选择',
				classifyArr: [
					[],
					[]
				], // picker - 数据源
				classifyIndex: [0, 0], // picker - 索引

				childArr: [], // 二级分类数据源
				model: {
					demand:{}
				},
				form:{},
				selectIam: ['个人', '团队'],
				showIam: false,
				showineed: false,
				selectineed: ['旅游活动', '体育活动'],
				showMode: false,
				selectMode: ["融资合作", "企业合作", "服务合作"],
				fetchDict: [],
				defaultValue: [3],
				defaultValue1: [2],
				listCitys: [],
				listXmlbs: [],
				show: false,
				showDate: false,
				mode: 'range',
				result: "开始时间   至   结束时间",
				startText: '开始',
				endText: '结束',
				rangeColor: '#2979ff',
				rangeBgColor: 'rgba(41,121,255,0.13)',
				activeBgColor: '#2979ff',
				height: 20,
				bgColor: this.$u.color.bgColor,
				marginTop: 30,
				marginBottom: 30,
				btnType: 'primary',
				reqBody: {},
				rules: {
					// fwnr: [{
					// 	required: false,
					// 	message: '请选择服务内容',
					// 	trigger: 'change'
					// }],
					// lb: [{
					// 	required: false,
					// 	message: '请选择项目类别',
					// 	trigger: 'change'
					// }],
				},				
				required: false,
				border: false,
				check: false,
				selectShowFwnr: false,
				labelPosition: 'left',
				codeTips: '',
				errorType: ['toast'],
				url:'',
				selectLB:0,
				identityTypeShow:false,
				show:false
			};
		},
		mounted() {},
		onShow() {
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(options) {
			if (options.row) {
				this.model = JSON.parse(decodeURIComponent(options.row));
			}
			if(this.model.iam == "企业"){
				this.ppdxs = ["请选择","企业","团队","个人"];
			}else{
				this.ppdxs = ["企业"];
			}
			this.form.lb = "企业工程服务合作";
			
			if(options.type){
				this.url = JSON.parse(decodeURIComponent(options.type));
				if(this.url == 'wisdomcommune/zhihuinjy'){
					this.show = true;
					this.form.lb = "企业联合体合作";				
				}else if(this.url == 'wisdomcommune/application'){
					this.selectLB = 1;
					this.form.lb = "";
				}
			}
			
			
			var keys = {'keys':['zhservice_content','service_content','company_type']}
			this.dictionaryFetchDict(keys);
			this.getTeamList();
		},
		methods: {			
			async getTeamList(){
				let result = await this.$apis.findUserTeam();
				this.selectListTeam = result.data;
				if(result.data.length == 0 && this.model.iam == '智汇团队'){
					uni.showToast({
						title:"您还没有创建团队",
						icon:'none'
					})
					setTimeout(function(){						
						uni.navigateBack();
					},2000);
				}
			},
			confirmTeam(e) {
				e.map((val, index) => {
					this.form.team = val.label;
				})
			},
			mSelect() {
				this.$refs.triTree._show()
			},
			setChooseType(item, type){
				var column_array=this.$mUtils.array_column(item,'label');
				var modelValue=column_array.join(',');
				this.form[type] = modelValue;
				this.$forceUpdate()	
			},	
			bindPickerChange: function(e) {
				this.form.ppdx = this.ppdxs[e.target.value];	
				if(this.url == 'wisdomcommune/zhihuinjy'){		
					console.log("iam",this.model.iam);	
					console.log("ppdx",this.form.ppdx);
					if(this.form.ppdx != "企业" && this.model.iam == "企业" ){			
						this.form.lb = "MM企业寻求市场合作团队";				
					}else{		
						this.form.lb = "企业联合体合作";
					}
					if(this.model.iam != "个人" && this.model.iam != "企业" && this.form.ppdx == "企业"){			
						this.form.lb = "团队发起的互认请求";
					}
					if(this.model.iam == "个人"){
						this.form.lb = "个人发起的互认请求";
					}
				}
				console.log(this.url);
				console.log(this.form.ppdx);
				console.log(this.model.iam);
				this.$forceUpdate()
				
			},
			zhbindPickerChange: function(e) {		
				this.form.fwnr = this.fetchDict.zhservice_content[e.target.value].label;		
				this.$forceUpdate();
			},
			confirmXmlb(e) {
				this.form.lb = '';
				e.map((val, index) => {
					this.form.lb += this.form.lb == '' ? val.label : '-' + val.label;
				})
			},
			// 选择
			selectConfirmFwnr(e) {
				this.form.fwnr = '';
				e.map((val, index) => {
					this.form.fwnr += this.form.fwnr == '' ? val.label : '-' + val.label;
				});
			},
			async dictionaryFetchDict(keyWords){
				let result = await this.$apis.fetchMultipleKey(keyWords);
				this.fetchDict = result.data;
			},
			submit() {
				if(this.form.integrityDeposit === undefined){
					uni.showToast({
						title:"请输入诚信保证金",
						icon:'none'
					})
					return;
				}
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.model.demand = this.form;
						var model = encodeURIComponent(JSON.stringify(this.model));
						var type = this.pattern;
						console.log(this.url);
						if(this.url != ''){
							uni.redirectTo({
								url: '/pages/'+this.url+'?row=' + model
							})
						}else{
							uni.navigateTo({
								url: '/pages/wisdomcommune/zhihuiService?pattern=' + type + '&row=' + model
							})
						}
					} else {
						console.log('验证失败');
					}
				});

			}
		}
	};
</script>
<style scoped lang="scss">
	// 上下滑动
	.scroll-Y {
		height: 300rpx;

		.scroll-view-item {
			height: 300rpx;
			width: 100%;
		}
	}

	// 左右滑动
	.scroll-view_H {
		height: 400rpx;
		width: 100%;
		white-space: nowrap; // 滚动必须加的属性
		border: 1px #007aff solid;

		.scroll-view-item_H {
			height: 300rpx;
			width: 40%;
			margin-right: 20rpx;
			display: inline-block;
			vertical-align: top;
		}
	}

	page {
		// background: #f5f5f9;
	}

	.warp {
		background: #fff;
	}

	.count {
		.count-to {
			font-size: 24rpx;
		}

		text {
			padding: 2rpx 12rpx;
			background: #ff9e21;
			color: #ffffff;
			font-size: 24rpx;
		}
	}

	.group {
		padding: 6rpx 21rpx;
		background: #f1f7ff;
		border-radius: 6rpx;
		margin: 30rpx 30rpx 0 30rpx;
	}

	.button {
		width: 662rpx;
		margin: 145rpx auto 65rpx auto;
		background: #ab61ff;
		border-radius: 40rpx;
		border: 0;
		color: #fff;

		&.u-hairline-border:after {
			border: 0;
		}
	}

	.fgx {
		width: 100%;
		height: 20rpx;
		background-color: #F5F5F9;
		margin-top: 40rpx;
	}

	.wdztc {
		width: 190rpx;
		height: 56rpx;
		background: rgba(171, 97, 255, 0.15);
		border: 2rpx dashed #AB61FF;
		border-radius: 6rpx;
		color: #AB61FF;
		font-size: 28rpx;
		text-align: center;
		line-height: 56rpx;
		margin-top: 40rpx;
		margin-left: 280rpx;
	}

	.qtsm {
		display: flex;
		align-items: center;

		.hz {
			color: #0D1D36;
			font-size: 30rpx;
			margin-left: 15rpx;
		}
	}

	.zwpj {
		width: 690rpx;
		height: 260rpx;
		background-color: #F5F5F9;
		margin-top: 40rpx;
		font-size: 30rpx;
		color: #F5F5F9;
		border-radius: 10rpx;
		line-height: 44rpx;
	}
</style>
